{% extends "tat/base.html" %}

{% load util_tags %}

{% block head_addon %}
    {{ block.super }}
    <script type="text/javascript" src="{{ MEDIA_URL }}javascript/qbuilder.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}FusionCharts/FusionCharts.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}javascript/raphael-min.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}javascript/raphael_popup.js"></script>
    <style type="text/css">
        @import "{% setting "DOJANGO_BASE_MEDIA_URL" %}/release/custom_build_141/dojox/grid/resources/Grid.css";
    </style>
    {% if recover_request_id %}
        <script type="text/javascript">
        dojo.addOnLoad(function()
            {
            dojo.attr('whattodo', 'value', 'recover_existing');
            select_whattodo('whattodo', function ()
                {
                choose_query([{{ recover_request_id }}, {{ recover_request_id }}]);
                test_query();
                });
            });
        </script>
    {% endif %}


{% endblock %}

{% block content %}
    {{ block.super }}
    <form id="qbuilder_form" onSubmit='test_query(); return false;'>
        <table>
            <tr>
                <td colspan="2">
                    Je veux
                    <select id="whattodo" name="whattodo" onChange="select_whattodo(this);">
                        <option value="0"></option>
                        <optgroup label="Statistiques">
                            <option value="count">compter des...</option>
                            <option value="evolution">voir l'évolution dans le temps du nombre de...</option>
                        </optgroup>
                        <optgroup label="TAT">
                            <option value="tat">visualiser mon TAT</option>
                                <option value="event_delta">mesurer l'écart entre les évènements...</option>
                                <option value="event_delta_evolution">voir l'évolution dans le temps de l'écart entre les évènements...</option>
                        </optgroup>
                        <!-- TODO : virer ça et en faire un bouton 'Nouveau' -->
                        <optgroup label="Requêtes">
                            <option value="recover_existing">reprendre une requête mémorisée</option>
                        </optgroup>
                    </select>
                    <div id="model_choose_div" style="display: inline;"></div>
                    <div id="display_type" style="display: none;">
                        Type d'affichage : <div id="display_type_action" style="display: inline;"></div>
                        <div id="active_display_type" style="display: inline;"></div>
                    </div>
                    <button dojoType="dijit.form.Button" onclick="save_query();" style="display: inline;" id='save_query_btn'>
                        <img src="{{ MEDIA_URL }}icones/save.png" height="18px;"/><span>Sauvegarder</span>
                    </button>
                    <div id="chosen_query_div" style="display: inline;"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="filters" style="display: inline;">
                        <div id="active_filters"></div>
                        <div id="filter_actions"></div>
                    </div>
                </td>
                <td>
                    <div id="group_by" style="display: inline;">
                        <div id="active_groupings"></div>
                        <div id="grouping_actions"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="extra_choices" style="display: inline;">
                        <div id="active_extra_choices"></div>
                        <div id="extra_choices_actions"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="999" class="align-center">
                    <button dojoType="dijit.form.Button" onclick="test_query();" style="display: inline;" id='test_query_btn'>
                        <img src="{{ MEDIA_URL }}icones/ok.png" height="18px;"/><span>Lancer</span>
                    </button>
                </td>
            </tr>
        </table>
    </form>
    <div id="resulting_query"{% if not DEBUG_ACTIF %} style="display: none;"{% endif %}></div>
    <div id="resulting_data" style="width: 100%;"></div>
{% endblock %}
